<template>
    <div>
        <input type="number" max="100" min="0" v-model="percentage" oninput="if(value>100)value=100;if(value<0)value=0">
        <myyoumen :percentage="percentage"></myyoumen>
        <el-button-group>
            <el-button icon="el-icon-minus" @click="decrease"></el-button>
            <el-button icon="el-icon-plus" @click="increase"></el-button>
        </el-button-group>
    </div>
</template>
<script>
import youmen from "@/components/instrument.vue"
export default {
  components: {
    myyoumen:youmen
  },
  data() {
      return {
          percentage: 50,
      };
  },
  methods: {
      increase() {
        this.percentage += 1;
        if (this.percentage > 100) {
          this.percentage = 100;
        }
      },
      decrease() {
        this.percentage -= 1;
        if (this.percentage < 0) {
          this.percentage = 0;
        }
      },
    }
}
</script>